<template>
  <!-- 右边 新增第2个 图表     设备连接异常 -->
  <div class="wrapper">
    <div>
      <a-select default-value="2021" style="width: 80px" @change="handleChange">
        <a-select-option value="2018"> 2018 </a-select-option>
        <a-select-option value="2019"> 2019 </a-select-option>
        <a-select-option value="2020"> 2020 </a-select-option>
        <a-select-option value="2021"> 2021 </a-select-option>
      </a-select>
    </div>
    <div id="myChart5"></div>
  </div>
</template>

<script>
//    设备异常 分析
// import { equipmentAbnormal } from "@/api/demo.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      //  配置数据
      options5: {
        color: ["#2f89cf"], // 柱子的颜色
        tooltip: {
          trigger: "axis", // 触发类型  柱子 或者  坐标触发
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // 防止鼠标事件 频繁触发 防止抖动
          transitionDuration: 0,
        },
        // 修改图表的大小
        grid: {
          left: "1%",
          top: "3%",
          right: "0%",
          bottom: "5%",
          containLabel: true, // 可以理解为 y轴在 图表里面
        },
        xAxis: [
          {
            type: "category", // x 轴的类型
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
            ],
            // data: [],
            axisTick: {
              // 坐标轴刻度相关
              alignWithLabel: true, // 这个 false 和 true 有什么区别????
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.5)",
              fontSize: 8,
              // rotate: 30,
              //坐标轴刻度标签的相关设置。
              formatter: function (params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 7; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              },
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "35%",
            //  num 数量
            data: [20, 30, 30, 90, 150, 120, 60, 130, 100, 60],
            // data: [], // 请求后端数据
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    //   框架  选中哪一个日期  值就是哪一个
    handleChange(value) {
      console.log(`selected ${value}`);
      // 根据选中的日期   发请求 拿数据   再进行渲染
      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      if (value == "2018") {
        myChart5.setOption({
          series: [{ data: [10, 50, 20, 20, 50, 150, 160, 150, 80, 40] }],
        });
      } else if (value == "2019") {
        myChart5.setOption({
          series: [{ data: [50, 20, 10, 80, 60, 120, 100, 180, 70, 20] }],
        });
      } else if (value == "2020") {
        myChart5.setOption({
          series: [{ data: [20, 40, 20, 30, 70, 120, 150, 100, 70, 120] }],
        });
      } else {
        myChart5.setOption({
          series: [{ data: [120, 140, 120, 130, 170, 120, 150, 100, 70, 120] }],
        });
      }
    },

    goyear() {
      this.isActive = true;
      this.isActive2 = false;
      console.log("点击了去年的按钮", "===============================");
      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      myChart5.setOption({
        series: [{ data: [10, 50, 20, 20, 50, 150, 160, 150, 80, 40] }],
      });
    },

    gotodayYear() {
      this.isActive2 = true;
      this.isActive = false;

      console.log("点击了今年的按钮", "--------------------------------");
      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      myChart5.setOption({
        series: [{ data: [20, 30, 30, 90, 150, 120, 60, 130, 100, 60] }],
      });
    },

    //  echarts 不用管
    async drawLine() {
      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      // 绘制基本图表
      myChart5.setOption(this.options5);

      //  自己的代码    设备异常-------------------------------------
      const { data: res } = await equipmentAbnormal();
	  console.log("设备的数据",res)
      if (res.code == 200) {
        // res.result   是一个数组    数量 和   名字
        // console.log(res.result);
        var yichangNum = res.result.map((e) => {
          return e.deviceNum;
        });
        var yichangName = res.result.map((e) => {
          return e.deviceName;
        });
        myChart5.setOption({
          series: [{ data: yichangNum }],
          xAxis: [{ data: yichangName }],
        });
        // console.log("成功获取222 --设备异常  数据");
      }

      window.addEventListener("resize", function () {
        myChart5.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart5 {
  width: 100%;
  height: 90%;
  // background-color: pink;
  // background: url('../../images/aj.jpg') no-repeat;
  // opacity: 0.3;
}

//  动态绑定  类名
.active {
  background: rgb(6, 160, 171);
}
</style>